<template>
  <div class="son">
    儿子{{ username }}  --> 父亲传递过来的属性 {{msg}}
    <button @click="updateUsername">点击更新用户名</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "jack",
    };
  },
  props: ['msg'],
  methods: {
    updateUsername() {
      // this.username = "rose";
      this.$destroy()
    },
  },
  created() {
    console.log("儿子组件----------实例创建之后");
    console.log(this.msg);
    console.log(this.$el);
  },
  beforeMount() {
    console.log("儿子组件----------挂载之前");
    console.log(this.msg);
    console.log(this.$el);
  },
  // 组件挂载以后调用，如果项目中有操作dom，请在这里完成
  mounted() {
    console.log("儿子组件----------挂载之后");
    console.log(this.msg);
    console.log(this.$el);
  },
  // 实例销毁之前调用，一般用来清除定时器，或者解绑事件
  beforeDestroy() {
    console.log("儿子组件----------销毁之前");
    console.log(this.msg);
    console.log(this.$el);
  },
  destroyed() {
    console.log("儿子组件----------销毁之后");
    console.log(this.msg);
    console.log(this.$el);
  },

  beforeUpdate() {
    console.log("儿子组件----------更新之前");
    console.log(this.msg);
    console.log(this.$el);
  },
  updated() {
    console.log("儿子组件----------更新之后");
    console.log(this.msg);
    console.log(this.$el);
  },
};
</script>
<style>
</style>